// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html
/**
 * For radian conversion
 *
 * @constant
 * @type    {Number}
 */
var PI180 = Math.PI / 180;

/**
 * Twice of PI
 *
 * @constant
 * @type {Number}
 */
var PI2 = Math.PI * 2;

/**
 * Half of PI
 *
 * @constant
 * @type {Number}
 */
var HALFPI = Math.PI / 2;

/************************************************
 * @file  Left to right easing functions
 * @author Isaac Suttell
 ************************************************/



let {
    Waves,
    Ease,
    Wave
} = require('WaveBase');

let FishLine = cc.Class({
    // name: 'FishLine',
    extends: cc.Component,
    properties: {
        speed: 20,
        startPos: cc.p(480, 0),
        endPos: cc.p(1000, 0),
        curPos: cc.p(0, 0),
        moveSpeed: 200,
        drawFinished: false,
        isTakeUpLine: false,
        beginDrawLine: false,
        waves: {
            default: function() {
                return [new Wave()];
            },
            type: [Wave]
        },
        star: {
            default: null,
            type: cc.Node
        },
        direction: cc.p(0, 0),
        lineWidth: 2,
        strokeColor: cc.color(255, 255, 255, 100),


    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        var self = this;
        self.ctx = self.getComponent(cc.Graphics);
    },
    initWaveParam: function(stPos, endPos, speed) {
        var self = this;
        self.startPos = stPos;
        self.endPos = endPos;
        self.curPos = cc.p(480, 0);
        self.moveSpeed = speed;
        self.direction = cc.pNormalize(cc.pSub(self.endPos, self.startPos));
        // cc.log("the pDistance is" + cc.pDistance(self.endPos, self.startPos));
        self.totalTime = cc.pDistance(self.endPos, self.startPos) / self.moveSpeed;
        self.beginDrawLine = true;
        // cc.log("totalTime is " + self.totalTime);
    },

    isDrawFinished: function() {
        return this.drawFinished;
    },

    start: function() {

    },
    testLog: function() {
        HelloWorld.testLog();
    },

    initWaveWihtGraphicsAndWave: function(graphics, tempWaves) {
        var self = this;
        self.isDrawFishinhed = false;
        if (cc.director.setClearColor) {
            cc.director.setClearColor(cc.hexToColor('#01aaff'));
        }
        // cc.log("SineWaves onload begin");
        self.time = 0;
        // this.ctx = graphics;
        self.ctx = self.getComponent(cc.Graphics);
        self.ctx.lineCap = cc.Graphics.LineCap.BUTT;
        self.ctx.lineJoin = cc.Graphics.LineJoin.ROUND;
        self.yAxis = cc.visibleRect.height / 2;
        self.width = cc.visibleRect.width;

        // this.waves = tempWaves;
        // let waves = this.waves;
        // for (let i = 0, l = waves.length; i < l; i++) {
        //     waves[i].waveFn = Waves[Waves.Enum[waves[i].waveType]].bind(Waves);
        //     waves[i].easeFn = Ease[Ease.Enum[waves[i].easeType]].bind(Ease);
        // }
    },

    // startDrawLine: function()

    update: function(dt) {

        var self = this;
        if (!self.beginDrawLine) {
            return;
        }

        // self.testDraw();
        
        self.time += dt;

        self.drawLine(dt, null);

        // self.width = self.moveSpeed * self.time;
        // self.waveWidth = self.width * 0.95;
        // self.waveLeft = self.width * 0.05;

        // self.width = self.moveSpeed * self.time;
        // // Draw each line
        // let waves = self.waves;
        // for (let i = 0, l = waves.length; i < l; i++) {
        //     var timeModifier = self.waves[i].timeModifier || 1;
        //     self.drawLine(self.time, waves[i]);
        //     // self.drawWave(self.time * timeModifier, waves[i]);
        //     // self.drawSin(self.time, waves[i]);
        // }
    },

    takeUpLine: function(length) {
        var self = this;
        self.time = 0;
        self.isTakeUpLine = true;
        self.beginDrawLine = true;
        // self.endPos = cc.pMul
        self.direction = cc.pNormalize(cc.pSub(self.startPos, self.endPos));
        var tempP = cc.p(length*self.direction.x, length* self.direction.y);
        self.endPos = cc.pAdd(self.endPos, tempP);

    },

    testDraw: function() {
        var self = this;
        self.ctx.lineWidth = 2;
        self.ctx.strokeColor = cc.color(255, 255, 255, 100);

        self.ctx.clear();
        // Starting Line
        self.ctx.moveTo(0, 0);

        // var point = this.getLinePoint(time, 0, options);

        self.ctx.lineTo(500, 1000);

        // Stroke it
        self.ctx.stroke();
    },


    drawLine: function(time, options) {
        this.ctx.clear();
        this.ctx.lineWidth = this.lineWidth;
        this.ctx.strokeColor = this.strokeColor;

        // Starting Line
        this.ctx.moveTo(this.startPos.x, this.startPos.y);
        var point = this.getNewLinePoint(time);

        this.ctx.lineTo(point.x, point.y);
        this.star.setPosition(point.x, point.y);

        // Stroke it
        this.ctx.stroke();
    },
    drawSin: function(time, options) {
        // Styles
        var self = this;
        self.ctx.lineWidth = options.lineWidth;
        self.ctx.strokeColor = options.strokeColor;

        // Starting Line
        self.ctx.moveTo(self.startPos.x, self.startPos.y);
        self.ctx.lineTo(self.startPos.x, self.startPos.y);

        var length = self.moveSpeed * time;
        for (let i = 0; i <= length; i += 1) {
            var x = i;
            var y = Math.sin(x / 10);
            var percent = i / (length * 5);
            x = x + this.startPos.x;
            // var amplitude = options.amplitude * (Math.sin(percent * Math.PI - HALFPI) + 1) * 0.5;
            y = 10 * y + this.startPos.y;
            // self.ctx.lineTo(x, y);

        }

        for (let i = 0; i <= length; i += 1) {
            var x = i;
            var y = Math.sin(x / 10);
            var percent = i / (length * 5);
            x = x + this.startPos.x;
            y = 10 * y + this.startPos.y;
            var temp = cc.p(x, y);
            temp = cc.pRotateByAngle(temp, this.startPos, cc.pToAngle(this.direction));
            self.ctx.lineTo(temp.x, temp.y);

        }
        // Stroke it
        self.ctx.stroke();
    },
    /**
     * Draws one line on the canvas
     *
     * @param  {Number} time    current internal clock time
     * @param  {Object} options wave options
     */
    drawWave: function(time, options) {
        // Styles
        this.ctx.lineWidth = options.lineWidth;
        this.ctx.strokeColor = options.strokeColor;

        // Starting Line
        this.ctx.moveTo(this.startPos.x, this.startPos.y);

        for (let i = 0; i < this.waveWidth; i += options.segmentLength) {
            // Calculate where the next point is
            let point = this.getLinePoint(time, i, options);

            // Draw to it
            this.ctx.lineTo(point.x, point.y);
        }
        // Stroke it
        this.ctx.stroke();
    },

    getNewLinePoint: function(time) {
        var self = this;
        var tempX = self.moveSpeed * time * self.direction.x;
        var tempY = self.moveSpeed * time * self.direction.y;
        self.curPos.x +=tempX;
        self.curPos.y +=tempY;
        var x = self.curPos.x ;
        var y = self.curPos.y ;
        if((cc.pDistance(self.curPos, self.endPos) <=5)){
            self.curPos = self.endPos;
            self.beginDrawLine = false;
        }

        if (self.isTakeUpLine && (cc.pDistance(self.curPos, self.startPos)<=5)) {
            self.curPos = self.startPos;
            self.beginDrawLine = false;
        }
        return {
            x: x,
            y: y
        };
    }, 
    getLinePoint: function(time, position, options) {
        var self = this;

        var x = self.startPos.x + self.moveSpeed * time * self.direction.x;
        var y = self.startPos.y + self.moveSpeed * time * self.direction.y;
        return {
            x: x,
            y: y
        };

    },

    getSinPoint: function(time, position, options) {
        var self = this;

        var x = self.startPos.x + self.moveSpeed * time
        var y = self.startPos.y + Math.sin(x) * options.wavelength;


        var amplitude = options.amplitude * (Math.sin(percent * Math.PI - HALFPI) + 1) * 0.5;
        return {
            x: x,
            y: y
        };
    },

    getPoint: function(time, position, options) {
        var self = this;
        var x = self.startPos.x + (time * this.speed) + (-this.startPos.y + position) / options.wavelength;

        var y = options.waveFn(x);
        // Left and Right Sine Easing
        var amplitude = options.easeFn(position / this.waveWidth, options.amplitude);
        // cc.log("x is %f , y is %f", x, y);

        x = position + this.waveLeft;
        y = amplitude * y + this.startPos.y;
        // cc.log("after x is %f , y is %f", x, y);
        var temp = cc.p(x, y);
        temp = cc.pRotateByAngle(temp, this.startPos, cc.pToAngle(this.direction));
        x = temp.x;
        y = temp.y;

        return {
            x: x,
            y: y
        };
    }

    // update (dt) {},
});

module.exports = {
    FishLine
};